import React, { Component } from 'react';
import { connect } from 'react-redux'
import { changePage } from '../../../common/header/store/actionCreators';
import { actionCreators } from '../store'
import { WriterWrapper, WriterHeader, WriterHeaderBut, WriterList, WriterItem, LookAll } from '../style'

class Writer extends Component {
    render() {
        let {writerDataList} = this.props
        return (
            <WriterWrapper>
                <WriterHeader>
                    <div>推荐作者</div>
                    <WriterHeaderBut><i className="iconfont" >&#xe851;</i> 换一批</WriterHeaderBut>
                </WriterHeader>
                <WriterList>
                    {
                        writerDataList.map(item => {
                            return (
                                <WriterItem key={item.get('id')}>
                                    <img className='userImg' src={item.get('imgUrl')} alt="" />
                                    <div className="info">
                                        <div className="name">
                                            <div className="text">{item.get('name')}</div>
                                            <div className="attention">+关注</div>
                                        </div>
                                        <div className="synopsis"> {item.get('content')}</div>
                                    </div>
                                </WriterItem>
                            )
                        })
                    }
                    <LookAll>查看全部</LookAll>
                </WriterList>
            </WriterWrapper>
        );
    }

    componentDidMount() {
        this.props.changeData()
    }
}


const mapState = (state) => {
    return {
        writerDataList: state.getIn(['home', 'writerDataList'])
    }
}

const mapDispatch = (dispatch) => {
    return {
        changeData() {
            dispatch(actionCreators.getWriterDataList())
        },
    }
}

export default connect(mapState, mapDispatch)(Writer);